<template>
  <div>  
    <!-- 地图loading -->
    <Loading 
    v-show="isShowMapLoading"
    />

    <!-- 地图主体 -->
    <div id="container" ref="container" class="container" @touchmove='moveMap'></div>

    <!-- 放大缩小模块 -->
    <Scale />

    <!-- 指南针 -->
    <div id="compass" ref="compass" :style="{top:($store.state.isShowOperation?'100px':'65px'),transform:`rotate(${compassAngle}deg)`}"></div>

    <!-- 楼层切换模块 -->
    <FloorToggle 
    :floorData="floorData" 
    :initFloorID="config.initFloorID"
    ref="floorToggle"
    v-show="isShowFloorToggle"
    v-if="hasFloorData"/>

    <!--寻路出路线时路线提示模块 -->
    <div class="floorToggleMinUl" v-if="isShowFloorToggleMinUl" :style="changeFloorToggleMinUl">
      <li 
      :class="item.isClickFloorBtn? 'floorToggleUl_List-active' : 'floorToggleUl_List'" 
      id="floorToggleUl_List" 
      v-for="(item,index) in searchPathDetail" 
      :key="index"
      @click="showThisFloor(item)"
      >
				<i :class="item.isClickFloorBtn? 'floorToggleMinUl_iR': 'floorToggleMinUl_i'" v-if="!((item.no + 1) == searchPathDetail.length)"></i>
        <button name="btn" :disabled="!canFloorToggleMinUlClick">{{mapConfig.allFloorName[item.floorID]}}</button>
			</li>
    </div>

    <!-- 搜索输入框模块 -->
    <MapInput/>

    <!-- 搜索主体页 -->
    <div class="searchResultContent" v-show="this.$store.state.isShowSearchContent">
      <div class="searchResultListLoading" v-if="isShowLoading">
        <div class="searchResultListLoadingPic"></div>
      </div>
      <div class="searchResultListLoadingFail" v-if="isShowLoadFail">加载失败，没有该数据或网络异常~</div>
      <div class="slideList" v-if="isShowFacilities">
        <div class="swiper-container swiper-container2">
          <div class="swiper-wrapper swiper-wrapper2">
            <div
              class="swiper-slide swiper-slide2 shortcut clearfix"
              v-for="(item,index) in canShowArr"
              :key="index"
            >
              <ul class="pictures clearfix">
                <li @click="searchTopic(i.searchName)" v-for="(i,index) in item" :key="index">
                  <img class="picture" :src="i.image"></img>
                  <span>{{i.title}}</span>
                </li>
              </ul>
            </div>
          </div>
          <div class="swiper-pagination"></div>
        </div>
      </div>
      <div class="searchRecordTitle" v-if="$store.state.isShowRecordInfo">
			  <span>搜索记录</span>
		  </div>
		  <div class="searchRecordContent">
			  <ul>
          <li @click="resultInMap(item.shopName,item.floorID,item.pointID,item.shopName,true)" v-for="(item,index) in $store.state.searchHistoryRecordList" :key="index">
		        <div class="searchRecordPic"></div>
		        <div class="searchRecordInfo">
			      <div class="searchRecordShopInfo">{{item.shopName}}</div>
			      <div class="searchRecordFloorInfo">楼层：{{$store.state.mapConfig.allFloorName[item.floorID]}}</div>
		      </div>
	    </li>
			  </ul>
			  <div class="removeRecord" v-if="$store.state.isShowRecordInfo" @click="removeHistoryList">清空历史记录</div>
		  </div>
    </div>

    <!-- 公共设施搜索结果在地图呈现模块 -->
    <FacilitySearchPart 
    :afterFastSearchData ="afterFastSearchData" 
    ref="facilitySearchPart"
    v-if="isRenderFacilitySearchPart"
    />

    <!-- 模糊搜索结果在地图呈现模块 -->
    <FuzzySearchResult
    v-if="$store.state.isShowFuzzySearchPart"
    />

    <!-- 起点终点设置模块 -->
    <div class="setPoint" :style="changeSetPointBottom">
		  <div class="toper">
			  <div class="left">
				  <p class="pointName">{{$store.state.clickAreaName}}</p>
				  <p class="pointFloor">{{$store.state.clickAreaFloorname}}</p>
			  </div>
			  <div class="right">
				  <div class="setEnd" @click="setEnd">
				  </div>
				  <div class="setStart" @click="setStart">
				  </div>
			  </div>
		  </div>
		  <div class="share" @click="showShareContent">
			  <span class="share_icon"></span>
			  <span class="share_content">发送位置给好友</span>
		  </div>
	  </div>

   	<!--设置起点终点之后寻路部分-->
   	<div class="guidedSearchPath"
     :style="changeGuidedSearchPath">
   		<div class="searchPathTips">
         <div class="searchPathTopTip">{{searchPathTopTips}}</div>
         <div class="searchPathBottomTip">{{searchPathBottomTips}}</div> 
   		</div>
   		<div class="daohang">
   			<button class=mogo 
         :disabled='!(hasSetEndPoint&&hasSetStartPoint)' 
         @click='mogo' 
         type="button"
         :style="{backgroundColor:(hasSetEndPoint&&hasSetStartPoint)?'#FA7D34':'#666'}"
         >模拟导航</button>
   		</div>
   	</div>

    <!-- 显示搜索模块 -->
  	<div :class="$store.state.isShowOperation?'operation_active':'operation'">
  		<div class="operationContent">
  			<div class="inputLeft">
  				<span></span>
  			</div>
  			<div class="inputRight">
  				<div class="selectPoint">
  					<input type="text" id="startPoint" @click="intoSearchPart" :value="startPoint">
  				</div>
  				<div class="selectPoint">
  					<input type="text" id="endPoint" @click="intoSearchPart" :value="endPoint">
  				</div>
  			</div>
  			<div class="reverse" @click="reverse"></div>
  			<div class="goback" @click="goBack"></div>
  		</div>
  	</div>

    <!--模拟导航顶部部分-->
   	<div class="inNavigationTopBarBox" :style="{top:(isShowNavigationTopBarBox?'10px':'-500px')}">
   		<div class="inNavigationTopBar">
   			<div class="turnInfo">
   				<img class="turnInfoImg" :src="turnInfoImg"></img>
   				<div class="turnInfoText">{{turnInfo}}</div>
   			</div>
   			<div class="destinationInfo">
           目的地：
   				<span>{{endPoint}}</span>
   			</div>
   		</div>
   	</div>

    <!--模拟导航底部部分-->
   	<div class="inNavigationBotBarBox" :style="changeInNavigationBotBarBox">
   		<div class="inNavigationBotBar" :style="{left:(exitMoGo?'500px':'0px')}">
   			<div class="endNavigationBtn" @click="exitNavigation(1)">
   				<span></span>
   			</div>
   			<div class="endNavigationTime" @click="continueToNavigate">
   				<div>{{navigationTime}}</div>
   			</div>
   			<div class="endNavigationVoice" @click="mute">
   				<img :src="isMute"></img>
   			</div>
   		</div>
   		<div class="exitConfirmation" :style="{right:(exitMoGo?'0px':'500px')}">
   			<div @click="exitNavigation(3)">退出导航</div>
   			<div @click="exitNavigation(2)">取消</div>
   		</div>
   	</div>

    <!-- 模拟导航结束页 -->
	  <div class="endOfNavigationBox" v-if="isMoGoEnd">
	  	<div class="endOfNavigation" :style="{bottom:(this.$store.state.isBigScreen?'42px':'0px')}">
	  		<div class="startEndPointInfo" :style="{bottom:(!isShowFeedback?'0':'-308px')}">
	  			<div class="startEndPointBar">已到达目的地，全程
	  				<span>{{pathDistance}}</span> 米，耗时
	  				<span>{{Math.ceil(pathDistance / 1.1)}}</span>秒
            </div>
	  			<div class="startEndPointInput">
	  				<div class="startEndPointInputLeft">
	  					<span></span>
	  				</div>
	  				<div class="startEndPointInputCenter">
	  					<div class="selectPoint">
	  						<input type="text" unselectable="on" id="startPointOfEnd" readonly="readonly" :placeholder="startPoint">
	  					</div>
	  					<div class="selectPoint">
	  						<input type="text" unselectable="on" id="endPointOfEnd" readonly="readonly" :placeholder="endPoint">
	  					</div>
	  				</div>
	  			</div>
	  			<div class="startEndPointBtn">
	  				<button class="startEndPointClose" @click="exitNavigation(4)">关闭</button>
	  				<div></div>
	  				<button class="startEndPointToRank" @click="enterRank">评价本次服务</button>
	  			</div>
	  		</div>
	  		<div class="startEndPointRank" :style="{bottom:(isShowFeedback?'0':'-335px')}">
	  			<div class="startEndPointRankText">评价</div>
	  			<div class="startEndPointRankPick">
	  				<div class="startEndPointRankPickStart">
	  					<div class="starability_basic">
	  						<img value="0" :src="pickStarIndex.pickStar1" @click="setStar(1)" />
	  						<img value="1" :src="pickStarIndex.pickStar2" @click="setStar(2)" />
	  						<img value="2" :src="pickStarIndex.pickStar3" @click="setStar(3)" />
	  						<img value="3" :src="pickStarIndex.pickStar4" @click="setStar(4)" />
	  						<img value="4" :src="pickStarIndex.pickStar5" @click="setStar(5)" />
	  					</div>
	  				</div>
	  				<div class="startEndPointRankPickRemark">{{setStarLevel}}</div>
	  			</div>
	  			<div class="startEndPointRankLabel" :style="{height:(isShowFeedbackLabel?'123.5px':'0px')}">
	  				<div class="startEndPointRankLabelWords">
	  					<span @click="setLabelWords('体验流畅')">体验流畅</span>
	  					<span @click="setLabelWords('贴心提示')">贴心提示</span>
	  					<span @click="setLabelWords('定位准确')">定位准确</span>
	  					<span @click="setLabelWords('信息齐全')">信息齐全</span>
	  				</div>
	  				<div class="startEndPointRankLabelTextarea">
	  					<textarea placeholder="其他想说的" cols="30" rows="10" v-model="setLabelTextareaVal"></textarea>
	  				</div>
	  			</div>
	  			<div class="startEndPointRankBtn">
	  				<button class="startEndPointRankBtnClose" @click="exitNavigation(4)">关闭</button>
	  				<div></div>
	  				<button class="startEndPointRankBtnSend" @click="exitNavigation(5)">提交服务</button>
	  			</div>
	  		</div>
	  	</div>
	  </div>


    <!-- 路线提示组件 -->
    <PathInfo :isShowPathInfo='isShowPathInfo'/>

    <!-- 语音播报路径情况 -->
    <Audio ref="audio"/>

    <!-- 分享给好友位置组件 -->
    <ShareMap/>

    <!-- 区块信息展示 -->
    <AreaInfo :areaName="{clickAreaName:$store.state.clickAreaName,clickAreaFloorname:$store.state.clickAreaFloorname}" :isShowAreaInfo="$store.state.isShowAreaInfo"/>

  </div>
</template>

<script>
// 引入swiper
import Swiper from "swiper";
import { Toast } from 'vant';
// 放大缩小切换2D/3D组件
import Scale from '../components/scale'
// 楼层切换组件
import FloorToggle from "../components/floorToggle";
// 输入框组件
import MapInput from "../components/mapInput";
// 公共设施快速搜索
import FacilitySearchPart from "../components/facilitySearchPart";
// loading组件
import Loading from '../components/loading';
// 模糊搜索组件
import FuzzySearchResult from '../components/FuzzySearchResult';
// 路线提示组件
import PathInfo from '../components/pathInfo';
// 语音合成控件
import Audio from "../components/playAudio";
// 分享组件
import ShareMap from '../components/shareMap';
// 区块信息展示
import AreaInfo from '../components/areaInfo'
export default {
  props: {},
  data() {
    return {
      // 是否显示地图加载loading
      isShowMapLoading:true,
      // 地图初始化配置
      config: null,
      // 指南针旋转角度
      compassAngle: "",
      // 楼层信息
      floorData: null,
      // 更多地图信息
      mapConfig: {
        allFloorName: [], //所有楼层ID与名字的对象
        allNameFloor: {}, //所有名字与楼层ID的对象
        allNameOrder: {}, //所有名字与楼层序号的对象
        floorsOrder: {}, //楼层id与序号的对象
        orderFloors: {}, //序号与楼层id的对象
        pointNames: {}, //地图所有区块PID和点位名称对应对象
        namesPoint: {}, //地图所有区块点位名称和PID对应对象
        ponitsIdFloor: {}, //所有区块PID对应其所在楼层ID对象
        namesTag: {}, //所有区块name对应其tag对象
        shopList: [], //所有商店的数据列表
      },
      // 是否有了楼层信息的异步数据
      hasFloorData: false,
      // 是否显示楼层切换组件
      isShowFloorToggle:true,
      // 是否显示寻路出路线时路线提示模块
      isShowFloorToggleMinUl:false,
      // 搜索框value
      searchValue: "",
      // 公共设施图片和类型
      facilitiesArr: [
        {
          image: require("../assets/images/toilet.png"),
          searchName: "洗手间",
          title: "洗手间"
        },
        {
          image: require("../assets/images/barrierFreeToilet.png"),
          searchName: "无障碍洗手间",
          title: "无障碍洗手间"
        },
        {
          image: require("../assets/images/pregnantRoom.png"),
          searchName: "育婴室",
          title: "育婴室"
        },
        {
          image: require("../assets/images/custom.png"),
          searchName: "客服台",
          title: "客服台"
        },
        {
          image: require("../assets/images/vip.png"),
          searchName: "贵宾室",
          title: "贵宾室"
        },
        {
          image: require("../assets/images/elevator.png"),
          searchName: "升降梯",
          title: "升降梯"
        },
        {
          image: require("../assets/images/escalator.png"),
          searchName: "手扶梯",
          title: "手扶梯"
        },
        {
          image: require("../assets/images/doorway.png"),
          searchName: "出入口",
          title: "出入口"
        }
      ],
      // 公共设施数据
      facilitiesInfo: [],
      // 是否显示公共设施部分
      isShowFacilities: false,
      // 公共设施部分数据是否拉取失败
      isShowLoadFail: false,
      // 是否显示loading
      isShowLoading: true,
      // 接口中存在的公共设施数据
      arrExist: [],
      // 可以渲染的公共设施数据
      canShowArr: [],
      // 快速搜索匹配结果
      afterFastSearchData: [],
      // 是否渲染搜索结果在地图呈现模块
      isRenderFacilitySearchPart:false,
      // 引导导航top提示语
      searchPathTopTips:'',
      // 引导导航bottom提示语
      searchPathBottomTips:'',
      // 起点
      startPoint:'',
      // 终点
      endPoint:'',
      // 是否已经设置了起点
      hasSetStartPoint:false,
      // 是否已经设置了终点
      hasSetEndPoint:false,
      // 当前点击区块信息
      nowClickAreaData:{},
      // 寻路成功后生成路线的长度
      pathDistance:null,
      // 寻路所需时间，通过路径长度换算而来
      realTime:'',
      // 寻路成功后路线所在的楼层信息
      searchPathDetail:[],
      // 寻路成功后查看楼层路线按钮是否可点击
      canFloorToggleMinUlClick: true,
      // 是否显示模拟导航顶部部分
      isShowNavigationTopBarBox:false,
      // 模拟导航所需时间
      navigationTime:'',
      // 耗时倒计时的计时器
      realTimeCountdown: '',
      // 转向提示图片
      turnInfoImg: '',
      // 转向提示信息
      turnInfo: '',
      // 本地转向图片路径数组
      turnIntoPic: {
        right : require('../assets/images/icon_fx_youzhuan.png'),
        left : require('../assets/images/icon_fx_zuozhuan.png'),
        straight : require('../assets/images/icon_fx_zhixing.png'),
      },
      // 评星级别
      pickStarIndex: {
        pickStar1: require('../assets/images/icon_xingxing_mr.png'),
        pickStar2: require('../assets/images/icon_xingxing_mr.png'),
        pickStar3: require('../assets/images/icon_xingxing_mr.png'),
        pickStar4: require('../assets/images/icon_xingxing_mr.png'),
        pickStar5: require('../assets/images/icon_xingxing_mr.png'),
      },
      // 模拟导航结束
      isMoGoEnd:false,
      // 是否显示评分反馈页
      isShowFeedback: false,
      // 评星反馈级别
      setStarLevel: '您对本次服务满意吗',
      // 是否显示文字输入框反馈
      isShowFeedbackLabel:false,
      // 反馈输入框中的值
      setLabelTextareaVal: '',
      // 退出模拟导航
      exitMoGo:false,
      // 是否静音
      isMute: require("../assets/images/icon_shengyin.png"),
      // 是否显示路径提示
      isShowPathInfo:false,
      // url分享传参信息
      urlData:{
        mark: this.getQueryString('mark'),
        floorid: this.getQueryString('floorid'),
        setDebug: window.location.search.search("debug") != -1,
        projectID: this.getQueryString('p'),
        pathfinding: JSON.parse(decodeURIComponent(this.getQueryString('pathfinding'))),
      },
 
    };
  },
  computed: {
    // 动态设置起点终点bottom
   changeSetPointBottom(){
     if (this.$store.state.isBigScreen) {

      if(this.$store.state.isShowSetPoint){
         return{
           bottom:'42px'
         }
       }else{
         return{
           bottom:'-500px'
         }
       }

     }else{

       if(this.$store.state.isShowSetPoint){
         return{
           bottom:'0px'
         }
       }else{
         return{
           bottom:'-500px'
         }
       }

     }
   },
   // 动态设置引导寻路样式
   changeGuidedSearchPath(){
     if(this.$store.state.isBigScreen){

      if(this.$store.state.isShowGuidedSearchPathPart){
         
        return{
           bottom:'42px'
          }

        }else{
          return{
           height:'0px',
           bottom:'-50px'
          }
        }
 
     }else{

       if(this.$store.state.isShowGuidedSearchPathPart){
         
         return{
           bottom:'0px'
         }

       }else{
          return{
           height:'0px',
           bottom:'-50px'
         }
       }
       
     }

   },
   // 动态设置寻路按钮样式
   changeFloorToggleMinUl(){
     if(this.$store.state.isBigScreen){
        if(this.$store.state.isStartMoGo){
          return{
            bottom:'109px'
          }
         }else{
           return{
             bottom:'187px'
          }
       }

     }else{
       if(this.$store.state.isStartMoGo){
         return{
           bottom:'67px'
         }
       }else{
         return{
           bottom:'145px'
         }
       }

     }
   },
   // 动态设置模拟导航底部样式
   changeInNavigationBotBarBox(){
     if(this.$store.state.isBigScreen){
        if(this.$store.state.isStartMoGo){
          return{
            height:"60px",
            bottom:"42px"
          }
        }else{
          return{
            height:"0px",
            bottom:"-500px"
          }
        }

     }else{
       if(this.$store.state.isStartMoGo){
         return{
           height:"60px",
           bottom:"0px"
         }
       }else{
         return{
           height:"0px",
           bottom:"-500px"
         }
       }

     }
   }
  },
  watch: {

  },
  created() {

    // 是否是微信环境
    if(this.isWeixinCient()){
      // 判断是否是全面屏
      if(this.judgeBigScreen()){
        this.$store.commit('updateIsBigScreen',true)
      }
    }

    if(this.urlData.projectID){
      this.configInit(this.urlData.projectID)
    }

  },
  mounted() {

  },
  methods: {
    // 动态加载配置js文件
    loadScript(src, callback) {
	    var s,
	    	r,
	    	t
	    r = false
	    s = document.createElement('script')
	    s.type = 'text/javascript'
	    s.src = src
	    s.onload = s.onreadystatechange = function () {
	    	if (!r && (!this.readyState || this.readyState == 'complete')) {
	    		r = true
	    		callback()
	    	}
	    }
	    t = document.getElementsByTagName('script')[0]
	    t.parentNode.insertBefore(s, t)
    },
    // 初始化配置
    configInit(pid) {

	    let vRandom = Math.ceil(Math.random() * 100000000)
    
	    this.loadScript(`./static/config/${pid}.js?v=${vRandom}`,  () => {

        this.config = {
          debug: mapConfig.debug,
          initCompleted: this.initCompleted, //初始化完成之后的调用函数
          onSelected: this.onSelected, //当区块被选中时触发
          enabledControl: mapConfig.enabledControl, //是否启用手势操作
          container: this.$refs.container, //包装的div
          backgroundColor: mapConfig.backgroundColor, //地图背景颜色
          compassOffset: mapConfig.compassOffset, //指南针的位置和角度
          showLabelType: mapConfig.showLabelType, //默认显示店铺号，可以选
          crossBuild: mapConfig.crossBuild, //是否跨建筑
          labelScale: mapConfig.labelScale, //文本缩放值
          projectID: mapConfig.projectID, //项目ID
          buildingID: mapConfig.buildingID,//楼栋ID 一般情况下为空
          initFloorID: mapConfig.initFloorID, //初始化楼层
          accessToken: mapConfig.accessToken, //key 暂时不需要配置
          cloudID: mapConfig.cloudID,
          themeID: mapConfig.themeID, //地图主题文件夹ID号 String类型
          preCreation: mapConfig.preCreation, //是否后台静默渲染 默认为true
          opacity: mapConfig.opacity, //块的透明度
          groundLayer: mapConfig.groundLayer, //是否设置地图底图 布尔值
          bgisSvg: mapConfig.bgisSvg, // 底图是否是svg  布尔值
          isVue: mapConfig.isVue, //框架下需要填true
        };

        document.title = mapConfig.title;
    
        if(this.urlData.setDebug){
          this.config.debug = true
        }

        if(this.urlData.pathfinding){
          // 防止跳来跳去先加载终点楼层
          this.config.initFloorID = this.urlData.pathfinding.eFid;
        }

        
        // 得到公共设施数据
        this.getFacilitiesData(
          this.config.projectID,
          "SC",
          "GetMallFunctioninfo",
          "{'KEY':'BAF3CB32-E8F2-40A6-AE1A-A5BFE2CB6E14'}"
        );
    
	    	// 地图初始化
        this.init();
    
	    });
    },
    // 兼容全面屏
    judgeBigScreen() {  //，这里根据返回值 true 或false ,返回true的话 则为全面屏 
	    let result = false;
	  	const rate = window.screen.height / window.screen.width;    
	  	let limit =  window.screen.height == window.screen.availHeight ? 1.8 : 1.65; // 临界判断值  
	  	    
    
	  	if (rate > limit) {
	  	  result = true;
	  	}
	  	return result;
	  },
    // 判断是不是微信环境
    isWeixinCient(){
        var ua = navigator.userAgent.toLowerCase();
        if(ua.match(/MicroMessenger/i)=="micromessenger") {
            return true;
        } else {
            return false;
        }
    },
    // 初始化地图
    init() {
      const self = this;

      // 文本显示层级   数值越大  越容易显示
	    GIM.SHOW_SPRITE_LENGTH = mapConfig.SHOW_SPRITE_LENGTH;
	    // 公共设施显示层级 数值越大  越容易显示
	    GIM.SHOW_Facility_LENGTH = mapConfig.SHOW_Facility_LENGTH;
      let container = this.$refs.container;
      container.style.cssText =
        "width:" +
        container.clientWidth / 1 +
        "px;height:" +
        container.clientHeight / 1 +
        "px;text-align:right";
      this.config.container = container;
      window.map = new GIM.Map3D(this.config); // 初始化地图
      map.showCompass(mapConfig.showCompass);
      map.defaultCenterPoint = mapConfig.defaultCenterPoint;
      map.pathThickness = mapConfig.pathThickness;
      map.maxCameraRadius = mapConfig.maxCameraRadius;
      map.minCameraRadius = mapConfig.minCameraRadius;
      map.cameraRadius = mapConfig.cameraRadius;
      map.setAzimuthalAngle(mapConfig.setAzimuthalAngle);
      map.setPolarAngle(mapConfig.setPolarAngle);
      map.setAmbientColor(mapConfig.setAmbientColor);
	    map.setAmbientIntensity(mapConfig.setAmbientIntensity);
	    map.setDirColor(mapConfig.setDirColor);
	    map.setDirIntensity(mapConfig.setDirIntensity);

      map.regCompassChange(angel => {
        this.compassAngle = angel - 90;
      });

      map.regShowLoading (function(type){
        
        if(type == true){
          Toast.loading({
            mask: true,
            message: '正在加载该楼层数据...',
            duration: 0,       // 持续展示 toast
            forbidClick: false, // 禁用背景点击
          });
        }else{
          Toast.clear()
        }
      } )

    },
    // 地图初始化完成函数
    initCompleted(areaData) {
      const self = this;
      console.log("areaData :", areaData);

      let orderIndex = 1;

      areaData.forEach(e => {
        e.Order = orderIndex;
        orderIndex++;
      });

      // 创建更多地图信息
      areaData.forEach(function(t) {
        self.mapConfig.allFloorName[t.FloorID] = t.Name;
        self.mapConfig.allNameFloor[t.Name] = t.FloorID;
        self.mapConfig.orderFloors[t.Order] = t.FloorID;
        self.mapConfig.floorsOrder[t.FloorID] = t.Order;
        self.mapConfig.allNameOrder[t.Name] = t.Order;
        self.mapConfig.shopList = self.mapConfig.shopList.concat(t.Area);
        t.Area.forEach(data => {
          self.mapConfig.pointNames[data.PI] = data.AN;
          self.mapConfig.namesPoint[data.AN] = data.PI;
          self.mapConfig.ponitsIdFloor[data.PI] = data.FloorID;
          self.mapConfig.namesTag[data.AN] = data.Tag;
        });
      });


      
      self.mapConfig.shopList = self.mapConfig.shopList.filter(function(item) {
          return item[mapConfig.searchBNorAN];
      });




      // 楼层信息渲染所有楼层
      this.floorData = areaData;

      // 更新当前所需全局数据到vuex
      this.$store.commit(
        "updateNowFloor",
        this.mapConfig.allFloorName[this.config.initFloorID]
      );
      this.$store.commit("initMapDataDetails", this.mapConfig);

      // 楼层信息的异步数据已经存在了，此时渲染floorToggle组件
      this.hasFloorData = true;

      

      // 如果链接后面带有点位参数的话定位到该点
      if(this.urlData.mark){

        map.selectByID(this.urlData.mark,true)

      } else if (this.urlData.pathfinding){

        // 已经设置了起点
        this.hasSetStartPoint = true;
        // 已经设置了终点
        this.hasSetEndPoint = true;

        map.startPID = this.urlData.pathfinding.sId;
        map.endPID = this.urlData.pathfinding.eId;



        // 设置起点信息模块信息
        if(this.mapConfig.pointNames[this.urlData.pathfinding.sId].length !=0 && this.mapConfig.pointNames[this.urlData.pathfinding.sId] != 0){
          this.startPoint = `${this.mapConfig.pointNames[this.urlData.pathfinding.sId]}  ${this.mapConfig.allFloorName[this.urlData.pathfinding.sFid]}`;
        }else{
          this.startPoint = `您的位置  ${this.mapConfig.allFloorName[this.urlData.pathfinding.sFid]}`;
        }

        // 设置终点信息模块信息
        if(this.mapConfig.pointNames[this.urlData.pathfinding.eId].length !=0 && this.mapConfig.pointNames[this.urlData.pathfinding.eId] != 0){
          this.endPoint = `${this.mapConfig.pointNames[this.urlData.pathfinding.eId]}  ${this.mapConfig.allFloorName[this.urlData.pathfinding.eFid]}`;
        }else{
          this.endPoint = `您的位置  ${this.mapConfig.allFloorName[this.urlData.pathfinding.eFid]}`;
        }
        
        
        

        // 显示引导寻路页
        this.$store.commit('updateIsShowGuidedSearchPathPart',true);
        // 关闭设置起点终点页
        this.$store.commit("updateIsShowSetPoint", false);
        // 显示寻路详情部分
        this.$store.commit("updateIsShowOperation", true);
        // 如果搜索输入框显示的话让它隐藏
        if(this.$store.state.isShowSearchInput){
          this.$store.commit('updateIsShowSearchInput',false);
        }


        // 当起点终点都存在的情况下开始寻路
        this.searchPath()


      }


      this.isShowMapLoading = false;


 
    },
    // 地图选中函数
    onSelected(data) {
      console.log("data :", data);

      // 展示区块信息页
      this.$store.commit('updateIsShowAreaInfo',true);

      this.$store.commit('updateIsShowSetPoint',true);
      this.$store.commit("updateIsBackOrSearch", true);

      if(this.$store.state.isShowGuidedSearchPathPart){
        this.$store.commit('updateIsShowGuidedSearchPathPart',false);
      }

      map.zoomLevel(mapConfig.onSelectZoom)

      // 公共设施点击类型判断
      if (data.code === "escalator" || data.code === "service center" || data.code === "toilets" || data.code === "stair" || data.code === "lifts" || data.code === "man toilets" || data.code === "woman toilets" || data.code === "cashier" || data.code === "handicapped washroom" || data.code === "nursery room" || data.code === "washroom" || data.code === 'wheelchair wc') {

        this.$store.commit('updateAreaData',{
            clickAreaName: this.judgmentTheTypeOfPublicFacilities(data.code),
            clickAreaFloorname: this.mapConfig.allFloorName[data.floorID]
          });
        this.$store.commit('updataSearchInputVal',this.judgmentTheTypeOfPublicFacilities(data.code))
        this.nowClickAreaData = {
            areaName:this.judgmentTheTypeOfPublicFacilities(data.code),
            areaFloorname: this.mapConfig.allFloorName[data.floorID],
            areaPointID: data.nodeId
        }

      }else{
          this.$store.commit('updateAreaData',{
            clickAreaName: data.shopName? data.shopName:data.name,
            clickAreaFloorname: this.mapConfig.allFloorName[data.floorID]
          });
          this.$store.commit('updataSearchInputVal',data.shopName? data.shopName:data.name)
          this.nowClickAreaData = {
            areaName:data.shopName? data.shopName:data.name,
            areaFloorname: this.mapConfig.allFloorName[data.floorID],
            areaPointID: data.nodeId
          }
      }

      this.$store.commit('saveClickData',{
        nodeID: data.nodeId,
        floorID: data.floorID
      })

    },
    // 地图初始化
    mapResetPublic() {
      map.setPolarAngle(mapConfig.setPolarAngle);
      map.setAzimuthalAngle(mapConfig.setAzimuthalAngle);
      map.zoomLevel(mapConfig.zoomLevel);
      map.move2Point(mapConfig.defaultCenterPoint);
    },
    // 获取访问url后端参数code
    getFacilitiesData(pid, lan, command, parameter) {
      let cmd = {};
      cmd.command = command;
      cmd.pid = pid;
      cmd.lan = lan;
      cmd.parameter = parameter;
      let agrs = "code=" + JSON.stringify(cmd);

      let url =
        "https://api.cloudindoormap.com/ClientService.asmx/Command?" + agrs;

      this.Axios.get(url).then(response => {
        let i = 0;

        // 10s内拉取不到数据就显示数据拉取失败信息
        let getServeDataTime = setInterval(() => {
          i++;
          if (response.data.c != 200 && i == 10) {
            this.isShowLoading = false;
            this.isShowLoadFail = true;
            clearInterval(getServeDataTime);
          }
        }, 1000);

        // 拉取到了数据渲染公共设施部分
        if (response.data.c == 200) {
          this.facilitiesInfo = response.data.v.FunctionInfo;

          this.isShowLoading = false;
          this.isShowFacilities = true;
          //当快速搜索商家数据拉取完毕之后再渲染
          this.bindQuickShopSearch();
        }
      });
    },
    // 渲染公共设施部分
    bindQuickShopSearch() {
      const self = this;
      // 只获取接口有的公共设施数据
      for (let j = 0; j < self.facilitiesArr.length; j++) {
        let haveQuickShopSearchNum = 0;

        self.facilitiesInfo.forEach(element => {
          if (element.Name.indexOf(self.facilitiesArr[j].searchName) == -1) {
            haveQuickShopSearchNum++;
          }
        });

        if (haveQuickShopSearchNum == self.facilitiesInfo.length) {
          continue;
        } else {
          self.arrExist.push(self.facilitiesArr[j]);
        }
      }

      let firstArr =[],
      secordArr =[],
      thirdArr = [],
      slideLiNum = 5;//每个slide中存放几个li

      self.arrExist.forEach((e,index)=>{
        if(index < slideLiNum){
          firstArr.push(e)
        }else if(index < slideLiNum*2 && index >(slideLiNum -1)){
          secordArr.push(e)
        }else{
          thirdArr.push(e)
        }
      })


      // 存每个分页的slide数据
      if(Math.ceil(self.arrExist.length/slideLiNum) ==1){
          self.canShowArr = [firstArr]
      }else if(Math.ceil(self.arrExist.length/slideLiNum) ==2){
          self.canShowArr = [firstArr,secordArr]
      }else{
          self.canShowArr = [firstArr,secordArr,thirdArr]
      }

      // 创建swiper对象
      setTimeout(() => {
        let slideSwiper = this.initSwiper()
      }, 0);



    },
    // 初始化公共设施swiper
    initSwiper(){
      return new Swiper(".swiper-container2", {
          freeMode: false,
          observer: true, //修改swiper自己或子元素时，自动初始化swiper
          observeParents: true,
          pagination: ".swiper-pagination",
          pagination: {
            el: ".swiper-pagination"
          }
      });
    },
    // 搜索公共设施数据
    searchTopic(data){
      this.afterFastSearchData = [];
	    for (let i = 0; i < this.facilitiesInfo.length; i++) {
		  let arrD = this.facilitiesInfo[i].data
		  for (let j = 0; j < arrD.length; j++) {
			    if (data == this.facilitiesInfo[i].Name) {
				    let arrS = {}
				    arrS.PI = arrD[j].PI
				    arrS.FloorID = arrD[j].FI
				    arrS.BN = arrD[j].N
				    arrS.T = arrD[j].T
				    arrS.BI = arrD[j].BI
				    this.afterFastSearchData.push(arrS)
			    } 
		    }
      }

      this.isRenderFacilitySearchPart = true

      if (this.afterFastSearchData.length > 0) {

        // 在多栋情况下选取所需栋楼ID数据
        if (this.config.buildingID) {

          this.afterFastSearchData = this.afterFastSearchData.filter(e => {
            if (e.BI == this.config.buildingID) {
              return e;
            }
          });
        }

      }

      setTimeout(() => {
        this.$refs.facilitySearchPart.toSearchResultsOnMap()
      });

    },
    // 点击搜索结果转至地图页面
    resultInMap(shopName, floorID, pointID, name, ls) {

      // 关闭语音识别部分
      this.$store.commit("updateIsShowSpeechRecognition", false);



      // 如果寻路信息部分显示的情况
      if(this.$store.state.isShowOperation){
        this.$store.commit('updateIsShowSearchInput',false);
      }


       // 更新输入框内容
      this.$store.commit("updataSearchInputVal", shopName);
      // 图标改为搜索图标
      this.$store.commit("updateIsBackOrSearch", false);
      // 关闭模糊搜索部分
      this.$store.commit("updateIsShowFuzzySearchPart", false);
      // 关闭搜素部分
      this.$store.commit("updateIsShowSearchContent", false);
      // 更新当前显示楼层名称
      this.$store.commit(
        "updateNowFloor",
        this.$store.state.mapConfig.allFloorName[floorID]
      );
      // 跳转店铺
      map.selectByID(pointID, true);

      //判断历史记录中是否存在过该nodeID,若存在则不放入历史记录中
      let historyRecordList = {},
        canInsertToHistoryList = false;

      if (this.$store.state.searchHistoryRecordList.length > 0) {
        for (
          let i = 0;
          i < this.$store.state.searchHistoryRecordList.length;
          i++
        ) {
          if (this.$store.state.searchHistoryRecordList[i].pointID == pointID) {
            canInsertToHistoryList = false;
            break;
          } else {
            canInsertToHistoryList = true;
          }
        }
      } else {
        canInsertToHistoryList = true;
      }

      //生成历史记录
      if (!ls && canInsertToHistoryList) {
        historyRecordList.pointID = pointID;
        historyRecordList.floorID = floorID;
        historyRecordList.shopName = shopName;

        this.$store.commit("updateSearchHistoryRecordList", historyRecordList);
        this.$store.commit("updateIsShowRecordInfo", true);
      }
    },
    // 清空历史记录
    removeHistoryList(){
      this.$store.commit("updateSearchHistoryRecordList", true);
      this.$store.commit("updateIsShowRecordInfo", false);
    },
    // 设置起点
    setStart(){
      // 显示引导寻路页
      this.$store.commit('updateIsShowGuidedSearchPathPart',true);
      // 关闭设置起点终点页
      this.$store.commit("updateIsShowSetPoint", false);
      // 显示寻路详情部分
      this.$store.commit("updateIsShowOperation", true);
      // 隐藏区块信息
      this.$store.commit('updateIsShowAreaInfo',false);

      // 已经设置了起点
      this.hasSetStartPoint = true;
      // 设置起点信息模块信息
      this.startPoint = `${this.nowClickAreaData.areaFloorname}  ${this.nowClickAreaData.areaName}`;
      // 设置起点
      map.startPID = this.nowClickAreaData.areaPointID;
      if(this.hasSetStartPoint&&this.hasSetEndPoint){

        // 当起点终点都存在的情况下开始寻路
        this.searchPath()
      }else{
        this.searchPathTopTips = '请设置终点';
      }

      // 如果搜索输入框显示的话让它隐藏
      if(this.$store.state.isShowSearchInput){
        this.$store.commit('updateIsShowSearchInput',false);
      }


    },
    // 设置终点
    setEnd(){
      // 显示引导寻路页
      this.$store.commit('updateIsShowGuidedSearchPathPart',true);
      // 关闭设置起点终点页
      this.$store.commit("updateIsShowSetPoint", false);
      // 显示寻路详情部分
      this.$store.commit("updateIsShowOperation", true);
      // 隐藏区块信息
      this.$store.commit('updateIsShowAreaInfo',false);

      // 已经设置了终点
      this.hasSetEndPoint = true;
      // 设置终点信息模块信息
      this.endPoint = `${this.nowClickAreaData.areaFloorname}  ${this.nowClickAreaData.areaName}`;
      // 设置起点
      map.endPID = this.nowClickAreaData.areaPointID;

      if( this.hasSetStartPoint && this.hasSetEndPoint ){

        // 当起点终点都存在的情况下开始寻路
        this.searchPath();

      }else{
        this.searchPathTopTips = '请设置起点';
      }

      // 如果搜索输入框显示的话让它隐藏
      if(this.$store.state.isShowSearchInput){
        this.$store.commit('updateIsShowSearchInput',false);
      }


    },
    // 关于点击卫生间电梯等的类型判断
    judgmentTheTypeOfPublicFacilities(type){
      let x;
	    switch (type) {
	    	case 'wheelchair wc':
	    		x = "无障碍卫生间";
	    		break;
	    	case 'toilets':
	    		x = "卫生间";
	    		break;
	    	case 'lifts':
	    		x = "直梯";
	    		break;
	    	case 'escalator':
	    		x = "扶梯";
	    		break;
	    	case 'stair':
	    		x = "楼梯";
	    		break;
	    	case 'nursery room':
	    		x = "育婴室";
	    		break;
	    	case 'man toilets':
	    		x = "男士卫生间";
	    		break;
	    	case 'woman toilets':
	    		x = "女士卫生间";
	    		break;
	    	case 'handicapped washroom':
	    		x = "残疾人士洗手间";
	    		break;
	    	case "service center":
	    		x = "客服台";
	    		break;
	    	case "washroom":
	    		x = "洗手间";
	    		break;
    
	    }
	    return x
    },
    // 模拟导航
    mogo(){
      const self = this;
      // 当不在起点楼层时跳转至起点楼层
      if(this.searchPathDetail[1]){
        this.showThisFloor(this.searchPathDetail[1])
      }
      

      // 关闭多层路线提示
      this.isShowPathInfo = false;

      // ios自动播放语音
      this.$store.state.audio.play();
      this.$store.state.audio.pause();

      // 寻路成功后查看楼层路线按钮设置为不可点击
      this.canFloorToggleMinUlClick = false;

      // 开始模拟导航
      this.$store.commit('updateIsStartMoGo',true);
      // 关闭引导寻路框
      this.$store.commit('updateIsShowGuidedSearchPathPart',false);
      // 关闭顶部显示寻路起点终点信息提示部分
      this.$store.commit("updateIsShowOperation", false);

      // 显示模拟导航顶部部分
      this.isShowNavigationTopBarBox = true;

      // 语音提示
      this.$refs.audio.audioAutoPlay("开始导航", "5")

      // 模拟导航时间自减
      this.navigationCountdown()

      // 地图模拟导航方法
      map.simulate()

      // 转向信息数组
			let rightArr = [];
			let leftArr = [];
			let LeftFrontArr = [];
			let RightFrontArr = [];
      let endArr = [];

      this.turnInfoImg = this.turnIntoPic.straight;
            
			map.regNavigationWalk( walkDetail => {
        // console.log('walkDetail :', walkDetail);

        if (walkDetail.z == 0) {

          // 当右转的时候
          if (walkDetail.turn == 'Right') {

            this.turnInfo = `${Math.ceil(walkDetail.dis / 20)}米后右转`;

            /* 取最大值 */
						rightArr.push(walkDetail.dis)

            if (walkDetail.dis == Math.max.apply(null, rightArr)) {
							let rightDis = Math.ceil(Math.max.apply(null, rightArr) / 20)
							if (rightDis > 15) {

                  self.$refs.audio.audioAutoPlay(`${rightDis - 4}米后右转`, "5")
                  
							}
						}

            if (Math.ceil(walkDetail.dis / 20) > 0) {

              this.turnInfoImg = this.turnIntoPic.right;

            }
            
            if (walkDetail.dis > 70 && walkDetail.dis < 80) {

              self.$refs.audio.audioAutoPlay("前方右转", "5")
              
						} else if (walkDetail.dis == 0) {

               this.turnInfo = `右转`;
              
						}

            

          } else if (walkDetail.turn == 'Left') {

            this.turnInfo = `${Math.ceil(walkDetail.dis / 20)}米后左转`

            // 取最大值
						leftArr.push(walkDetail.dis)

						if (walkDetail.dis == Math.max.apply(null, leftArr)) {
							let leftDis = Math.ceil(Math.max.apply(null, leftArr) / 20)
							if (leftDis > 15) {

									self.$refs.audio.audioAutoPlay(`${leftDis - 4}米后左转`, "5")
   
							}
            }
            
						if (Math.ceil(walkDetail.dis / 20) > 0) {

              this.turnInfoImg = this.turnIntoPic.left;
              
						}
						if (walkDetail.dis > 70 && walkDetail.dis < 80) {

              self.$refs.audio.audioAutoPlay("前方左转", "5")
              
						} else if (walkDetail.dis == 0) {

              this.turnInfo = '左转';
              
						}

          } else if (walkDetail.turn == 'LeftFront') {

            this.turnInfo = `${Math.ceil(walkDetail.dis / 20)}米后左转`;
						// 取最大值
						LeftFrontArr.push(walkDetail.dis)

						if (walkDetail.dis == Math.max.apply(null, LeftFrontArr)) {
							let LeftFrontDis = Math.ceil(Math.max.apply(null, LeftFrontArr) / 20)
							if (LeftFrontDis > 15) {

                  self.$refs.audio.audioAutoPlay(`${LeftFrontDis - 4}米后左转`, "5")
                  
							}
						}
						if (Math.ceil(walkDetail.dis / 20) > 0) {

              this.turnInfoImg = this.turnIntoPic.left;

						}
						if (walkDetail.dis > 70 && walkDetail.dis < 80) {

							this.turnInfo = '前方左转';
              self.$refs.audio.audioAutoPlay("左转", "5")
              
						}


          } else if (walkDetail.turn == 'RightFront') {


            this.turnInfo = `${Math.ceil(walkDetail.dis / 20)}米后右转`;
						// 取最大值
						RightFrontArr.push(walkDetail.dis)

						if (walkDetail.dis == Math.max.apply(null, RightFrontArr)) {
							let RightFrontDis = Math.ceil(Math.max.apply(null, RightFrontArr) / 20)
							if (RightFrontDis > 15) {

                  self.$refs.audio.audioAutoPlay(`${RightFrontDis - 4}米后右转`, "5")
                  
							}
						}
						if (Math.ceil(walkDetail.dis / 20) > 0) {

              this.turnInfoImg = this.turnIntoPic.right;

						}
						if (walkDetail.dis > 70 && walkDetail.dis < 80) {

							this.turnInfo = '前方右转';
              self.$refs.audio.audioAutoPlay("前方右转", "5")
              
						}


          } else if ((walkDetail.turn == 'lifts' && walkDetail.dis < 50) || (walkDetail.turn == 'Escalator' && walkDetail.dis < 50) || (walkDetail.turn == 'stair' && walkDetail.dis < 50)) {

            if (walkDetail.nextFloorID) {
								if (walkDetail.turn == 'Lifts') {

                  self.$refs.audio.audioAutoPlay(`请乘直梯至${this.mapConfig.allFloorName[walkDetail.nextFloorID].substring(0, 1)}楼`, "5")
                  this.turnInfo = `前方请乘直梯至${this.mapConfig.allFloorName[walkDetail.nextFloorID].substring(0, 1)}楼`;

								} else if (walkDetail.turn == 'Escalator') {

                  self.$refs.audio.audioAutoPlay(`请乘扶梯至${this.mapConfig.allFloorName[walkDetail.nextFloorID].substring(0, 1)}楼`, "5")
                  this.turnInfo = `前方请乘扶梯至${this.mapConfig.allFloorName[walkDetail.nextFloorID].substring(0, 1)}楼`;

								} else if (walkDetail.turn == 'Stair') {

                  self.$refs.audio.audioAutoPlay(`请走楼梯至${this.mapConfig.allFloorName[walkDetail.nextFloorID].substring(0, 1)}楼`, "5")
                  this.turnInfo = `前方请走楼梯至${this.mapConfig.allFloorName[walkDetail.nextFloorID].substring(0, 1)}楼`;

								}
						} else if (walkDetail.floorID) {
								if (walkDetail.turn == 'Lifts') {

                  this.turnInfo = `前方请乘直梯至${this.mapConfig.allFloorName[walkDetail.floorID].substring(0, 1)}楼`;
                  self.$refs.audio.audioAutoPlay(`请乘直梯至${this.mapConfig.allFloorName[walkDetail.floorID].substring(0, 1)}楼`, "5")
                  
								} else if (walkDetail.turn == 'Escalator') {

                  this.turnInfo = `前方请乘扶梯至${this.mapConfig.allFloorName[walkDetail.floorID].substring(0, 1)}楼`;
                  self.$refs.audio.audioAutoPlay(`请乘扶梯至${this.mapConfig.allFloorName[walkDetail.floorID].substring(0, 1)}楼`, "5")
                  
								} else if (walkDetail.turn == 'stair') {

                  this.turnInfo = `前方请走楼梯至${this.mapConfig.allFloorName[walkDetail.floorID].substring(0, 1)}楼`;
                  self.$refs.audio.audioAutoPlay(`请走楼梯至${this.mapConfig.allFloorName[walkDetail.floorID].substring(0, 1)}楼`, "5")
                  
								}
            }

            if(walkDetail.dis == 0){

              // 楼层路线按钮提示切换
              this.searchPathDetail.forEach( e => {
                e.isClickFloorBtn = false;


                // 当下一楼层id一致时给其按钮高亮
                if(e.floorID == walkDetail.nextFloorID){
                  e.isClickFloorBtn = true
                }
              })

            
            }
              





          } else if (walkDetail.turn == 'end'){

            this.turnInfo = `${Math.ceil(walkDetail.dis / 20)}米后到达终点`;

            endArr.push(walkDetail.dis);

            if (walkDetail.dis == Math.max.apply(null, endArr)) {

              let endDis = Math.ceil(Math.max.apply(null, endArr) / 20)
              
							if (endDis > 15) {
	
									self.$refs.audio.audioAutoPlay(`${endDis - 6}米后到达目的地`, "5")
		
              }
              
            }
            
            if (walkDetail.dis == 0 && walkDetail.turn == "end") {

							self.$refs.audio.audioAutoPlay("已到达目的地附近，感谢使用创互地图", "5")
              this.turnInfo = '已到达目的地';
              // 清除定时器
              clearInterval(this.realTimeCountdown)

              // 寻路成功后查看楼层路线按钮重新设置为可点击
              this.canFloorToggleMinUlClick = true;

              // 结束模拟导航
              this.$store.commit('updateIsStartMoGo',false);

              // 隐藏寻路提示楼层路线部分
              this.isShowFloorToggleMinUl = false;

              // 显示楼层切换模块
              this.isShowFloorToggle = true;

              // 模拟导航结束
              this.isMoGoEnd = true;

              
						}



          } else{

          }

        }else {

        }

      })
    },
    // 继续模拟导航
    continueToNavigate(){

      if(this.navigationTime == '继续模拟导航'){

        map.toggleSimulate(true);
        this.navigationCountdown()

      }


    },
    // 退出模拟导航
    exitNavigation(type){

      if(type == 1){

        this.exitMoGo = true;

      } else if (type == 2) {

        this.exitMoGo = false;

      } else if (type == 3) {

        this.$refs.audio.audioAutoPlay("导航结束", "5")
        this.goBack()

      } else if (type == 4) {

        this.goBack()

      } else if (type == 5) {

        Toast({
                message: '已完成导航',
                position: 'middle',
                duration: 3000
        });
        this.goBack()

      }

      clearInterval(this.realTimeCountdown)

    },
    // 静音
    mute(){

      if (this.isMute == require("../assets/images/icon_shengyin.png")) {

        this.isMute = require("../assets/images/icon_jingyin.png");

        // 兼容ios
        this.$store.state.audio.muted = true

      } else {

        this.isMute = require("../assets/images/icon_shengyin.png");

        // 兼容ios
        this.$store.state.audio.muted = false

      }

    },
    // 评价反馈信息
    enterRank(){

      // 显示评价反馈部分
      this.isShowFeedback = true;
      // 重置隐藏文字输入框反馈
      this.isShowFeedbackLabel = false;
      // 重置反馈输入框内容
      this.setLabelTextareaVal = ''


      // 重置
      this.setStarLevel = '您对本次服务满意吗';
      this.pickStarIndex = {
        pickStar1: require('../assets/images/icon_xingxing_mr.png'),
        pickStar2: require('../assets/images/icon_xingxing_mr.png'),
        pickStar3: require('../assets/images/icon_xingxing_mr.png'),
        pickStar4: require('../assets/images/icon_xingxing_mr.png'),
        pickStar5: require('../assets/images/icon_xingxing_mr.png'),
      };

    },
    // 寻路
    searchPath(type){

      const self = this;

      if(map.startPID && map.endPID){
        if(map.startPID == map.endPID){
          Toast({
            message: '起始点相同,请重新设置',
            position: 'middle',
            duration: 3000
          });
          this.goBack()
          return
        }else{
          map.searchPath( msg => {

            if (msg.type == 'done') {

              self.$store.commit('updateIsShowAreaInfo',false);

              // 此时让地图无法点击
              map.areaClickEmbed = false;

              self.pathDistance = Math.ceil(msg.dis / 20);

              self.realTime = Math.ceil(self.pathDistance / 1.1);

              this.searchPathTopTips = `${this.realTime}秒 约${this.pathDistance}米`;
              this.searchPathBottomTips = `到达目的地 ${this.endPoint}`

              self.searchPathDetail = [];

              msg.floorIDs.forEach( (e,index) => {
                if(index == 0){
                  self.searchPathDetail.push({
                     no:index,
                     floorID: e,
                     isClickFloorBtn:true
                   })
                }else{
                  self.searchPathDetail.push({
                     no:index,
                     floorID: e,
                     isClickFloorBtn:false
                   })
                }
 
              })

              self.searchPathDetail = self.searchPathDetail.reverse()


              // 不显示楼层切换按钮组件
              self.isShowFloorToggle = false;

              // 显示路线楼层提示
              self.isShowFloorToggleMinUl = true;

              // 展示初始楼层信息
              map.showFloors([self.searchPathDetail[self.searchPathDetail.length -1].floorID])

              
              if(self.searchPathDetail.length > 1){
                self.isShowPathInfo = true;
              }


            }else{
              Toast({
                message: '路线规划失败，请重试',  
                position: 'middle',
                duration: 3000
              });
              self.goBack()
              return
            }

          },type)
        }

      }
    },
    // 进入搜索页面
    intoSearchPart(){
      // 显示搜索输入框
      this.$store.commit('updateIsShowSearchInput',true);
      // 显示搜索主体页
      this.$store.commit("updateIsShowSearchContent", true);
      // 是否显示后退图标还是搜索图标
      this.$store.commit("updateIsBackOrSearch", true);
      // 输入框内容清空 
      this.$store.commit("updataSearchInputVal", null);
      
    },
    // 起点终点互换
    reverse(){

      // 起点终点互换
      [this.endPoint,this.startPoint] = [this.startPoint,this.endPoint];

      [map.endPID,map.startPID] = [map.startPID,map.endPID];

      setTimeout(() => {
        this.searchPath()
      }, 200);

    },
    // 返回按钮
    goBack(){
      // 关闭引导寻路框
      this.$store.commit('updateIsShowGuidedSearchPathPart',false);
      // 关闭设置起点终点部分
      this.$store.commit("updateIsShowSetPoint", false);
      // 关闭顶部显示寻路起点终点信息提示部分
      this.$store.commit("updateIsShowOperation", false);
      // 清空搜索框内容
      this.$store.commit('updataSearchInputVal',null);
      // 模拟导航结束
      this.$store.commit('updateIsStartMoGo',false);
      // 显示搜索图标
      this.$store.commit("updateIsBackOrSearch", false);
      // 清除标记
      map.cleanSelectUnit3D();
      // 清除路径
      map.clearPath(true);
      // 显示楼层切换模块
      this.isShowFloorToggle = true;
      // 隐藏寻路提示楼层路线部分
      this.isShowFloorToggleMinUl = false;
      // 还原起点终点默认值
      this.hasSetEndPoint = false;
      this.hasSetStartPoint =false;
      map.startPoint = null;
      map.endPID = null;
      this.startPoint = '';
      this.endPoint = '';


      // 语音合成重置
      this.isMute = require("../assets/images/icon_shengyin.png");
      this.$store.state.audio.muted = false


      // 隐藏模拟导航顶部提示
      this.isShowNavigationTopBarBox = false;

      // 重置模拟导航结束
      this.isMoGoEnd = false

      // 重置模拟导航结束方式
      this.exitMoGo = false

      // 模拟导航提示清空
      this.searchPathTopTips ='';
      this.searchPathBottomTips = '';

      // 清除模拟导航计时定时器
      this.realTimeCountdown = null;

      // 重置隐藏文字输入框反馈
      this.isShowFeedbackLabel = false;
      // 重置反馈输入框内容
      this.setLabelTextareaVal = ''

      // 重置评星
      this.setStarLevel = '您对本次服务满意吗';
      this.pickStarIndex = {
        pickStar1: require('../assets/images/icon_xingxing_mr.png'),
        pickStar2: require('../assets/images/icon_xingxing_mr.png'),
        pickStar3: require('../assets/images/icon_xingxing_mr.png'),
        pickStar4: require('../assets/images/icon_xingxing_mr.png'),
        pickStar5: require('../assets/images/icon_xingxing_mr.png'),
      };



      // 寻路成功后查看楼层路线按钮重新设置为可点击
      this.canFloorToggleMinUlClick = true;

      // 让地图重新可点击
      map.areaClickEmbed = true;

      // 地图位置缩放初始化
      this.mapResetPublic()

      // 切换至起点楼层
      if(this.searchPathDetail.length != 0){
        map.showFloors([this.searchPathDetail[this.searchPathDetail.length -1].floorID],true);
        this.$store.commit("updateNowFloor",this.mapConfig.allFloorName[this.searchPathDetail[this.searchPathDetail.length -1].floorID])
      }


      // 如果搜索输入框隐藏的话让它显示
      if(!this.$store.state.isShowSearchInput){

        setTimeout(() => {
          this.$store.commit('updateIsShowSearchInput',true);
        }, 0);
        

      }

      // 隐藏路径提示
      this.isShowPathInfo = false;

      // 隐藏区块信息页
      this.$store.commit('updateIsShowAreaInfo',false);



    },
    // 显示点击的楼层路线
    showThisFloor(item){
      // console.log('item :', item);

      this.searchPathDetail.forEach( e => {
        e.isClickFloorBtn = false;
      })

      item.isClickFloorBtn = true

      map.showFloors([item.floorID]);

      this.mapResetPublic()

      // 此时隐藏路径提示
      this.isShowPathInfo = false;

    },
    // 模拟导航倒计时方法
    navigationCountdown() {

      this.realTime -= 5  

	    if (this.realTime > 5) {
    
            this.navigationTime = `预计${this.formatSeconds(this.realTime)}后达到`
            
	    } else {
    
            this.navigationTime = "您已到达目的地附近"

	    }


      this.realTimeCountdown = setTimeout(()=>{
        this.navigationCountdown()
      }, 1000)
      
    },
    // 秒钟换算
    formatSeconds(value) {
    	var theTime = parseInt(value); // 秒
    	var theTime1 = 0; // 分
    	var theTime2 = 0; // 小时
    	if (theTime > 60) {
    		theTime1 = parseInt(theTime / 60);
    		theTime = parseInt(theTime % 60);
    		if (theTime1 > 60) {
    			theTime2 = parseInt(theTime1 / 60);
    			theTime1 = parseInt(theTime1 % 60);
    		}
    	}
    	if (parseInt(theTime) > 0) {
    		var result = "" + parseInt(theTime) + "秒";
    		if (theTime1 > 0) {
    			result = "" + parseInt(theTime1) + "分" + result;
    		}
    		if (theTime2 > 0) {
    			result = "" + parseInt(theTime2) + "小时" + result;
    		}
    	} else {
    		var result = ''
    		if (theTime1 > 0) {
    			result = "" + parseInt(theTime1) + "分钟" + result;
    		}
    		if (theTime2 > 0) {
    			result = "" + parseInt(theTime2) + "小时" + result;
    		}
    	}
    	return result
    },
    // 评星事件
    setStar(index){

      // 显示文字输入框反馈
      this.isShowFeedbackLabel = true;

      this.pickStarIndex = {
        pickStar1: require('../assets/images/icon_xingxing_mr.png'),
        pickStar2: require('../assets/images/icon_xingxing_mr.png'),
        pickStar3: require('../assets/images/icon_xingxing_mr.png'),
        pickStar4: require('../assets/images/icon_xingxing_mr.png'),
        pickStar5: require('../assets/images/icon_xingxing_mr.png'),
      };

      if(index == 1){
        this.setStarLevel = '体验较差'
        this.pickStarIndex.pickStar1 = require('../assets/images/icon_xingxing_xz.png')

      }else if(index == 2){
        this.setStarLevel = '体验一般'
        this.pickStarIndex.pickStar1 = require('../assets/images/icon_xingxing_xz.png')
        this.pickStarIndex.pickStar2 = require('../assets/images/icon_xingxing_xz.png')

      }else if(index == 3){
        this.setStarLevel = '体验良好'
        this.pickStarIndex.pickStar1 = require('../assets/images/icon_xingxing_xz.png')
        this.pickStarIndex.pickStar2 = require('../assets/images/icon_xingxing_xz.png')
        this.pickStarIndex.pickStar3 = require('../assets/images/icon_xingxing_xz.png')

      }else if(index == 4){
        this.setStarLevel = '比较满意'
        this.pickStarIndex.pickStar1 = require('../assets/images/icon_xingxing_xz.png')
        this.pickStarIndex.pickStar2 = require('../assets/images/icon_xingxing_xz.png')
        this.pickStarIndex.pickStar3 = require('../assets/images/icon_xingxing_xz.png')
        this.pickStarIndex.pickStar4 = require('../assets/images/icon_xingxing_xz.png')

      }else if(index == 5){
        this.setStarLevel = '非常满意'
        this.pickStarIndex.pickStar1 = require('../assets/images/icon_xingxing_xz.png')
        this.pickStarIndex.pickStar2 = require('../assets/images/icon_xingxing_xz.png')
        this.pickStarIndex.pickStar3 = require('../assets/images/icon_xingxing_xz.png')
        this.pickStarIndex.pickStar4 = require('../assets/images/icon_xingxing_xz.png')
        this.pickStarIndex.pickStar5 = require('../assets/images/icon_xingxing_xz.png')
      }

    },
    // 评分打标签
    setLabelWords(label){

      // 判断是否重复点击
      if(this.setLabelTextareaVal.indexOf(label) == -1){
        this.setLabelTextareaVal = `${this.setLabelTextareaVal}  ${label}`
      }else{

        Toast({
                message: '您已提交该反馈',
                position: 'middle',
                duration: 3000
        });

      }

    },
    // 移动地图  此时暂停模拟导航
    moveMap(){

      map.regNavigationPause( () => {

        this.navigationTime = '继续模拟导航';

        if(this.realTimeCountdown){
  
          clearInterval(this.realTimeCountdown)
          this.realTimeCountdown = null
  
        }

        // 让查看楼层路线按钮设置为可点击  此时可以查看各楼层路线
        this.canFloorToggleMinUlClick = true;

      })

      // 隐藏区块信息页
      this.$store.commit('updateIsShowAreaInfo',false);
 

    },
    //直接截取 code 的函数
	  GetUrlParam(paraName) {
    	let url = document.location.toString();
    	let arrObj = url.split("?");
  
    	if (arrObj.length > 1) {
    		let arrPara = arrObj[1].split("&");
    		let arr;
    		for (let i = 0; i < arrPara.length; i++) {
    			arr = arrPara[i].split("=");
  
    			if (arr != null && arr[0] == paraName) {
    				return arr[1];
    			}
    		}
    		return "";
    	} else {
    		return "";
    	}
    },
    // 显示分享页面
    showShareContent(){
      this.$store.commit('updateIsShowSetPoint',false);
      this.$store.commit('updateIsShowShareMap',true);
    },
    // 截取url参数
    getQueryString(name){
	    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
	    var r = window.location.search.substr(1).match(reg);
	    if (r != null) {
    
	    	var temp = (r[2]);
	    	switch (temp) {
	    		case "undefined":
	    		case "null":
	    		case "":
	    		case " ":
	    			temp = null
	    			break;
    
	    		default:
	    			break;
	    	}
    
	    	return temp;
	    }
	    return null;
    }

  },
  components: {
    // 楼层切换组件
    FloorToggle,
    // 输入框组件
    MapInput,
    // 公共设施搜索部分
    FacilitySearchPart,
    // loading组件
    Loading,
    // 模糊搜索组件
    FuzzySearchResult,
    // 放大缩小切换2D/3D组件
    Scale,
    // 路线提示组件
    PathInfo,
    // 语音合成控件
    Audio,
    // 分享给好友位置组件
    ShareMap,
    // 区块信息展示组件
    AreaInfo
  }
}
</script>

<style lang='less'>
body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100vh;
}

// 指南针
#compass {
  position: fixed;
  top: 65px;
  right: 10px;
  width: 30px;
  height: 30px;
  transition: right 0.5s, top 0.5s;
  /* Firefox 4 */
  -moz-transition: right 0.5s, top 0.5s;
  /* Safari 和 Chrome */
  -webkit-transition: right 0.5s, top 0.5s;
  /* Opera */
  -o-transition: right 0.5s, top 0.5s;
  background: url("../assets/images/compass.png") no-repeat center;
  background-size: contain;
}

// 地图模块
#container {
  position: fixed;
  width: 100%;
  height: 100vh;
}


/* 寻路出路线时路线提示模块 */
.floorToggleMinUl {
  width: 40px;
  height: auto;
  bottom: 135px;
  left: 12px;
  position: fixed;
  z-index: 109;
  transition: bottom 0.5s;
  /* Firefox 4 */
  -moz-transition: bottom 0.5s;
  /* Safari 和 Chrome */
  -webkit-transition: bottom 0.5s;
  /* Opera */
  -o-transition: bottom 0.5s;
  li {
    position: relative;
  }
  .floorToggleUl_List button {
    margin-top: 2.5px;
    font-family: "MicrosoftYaHei";
    font-size: 13px;
    color: #595959;
    text-align: center;
    line-height: 27px;
    width: 40px;
    height: 40px;
    background-color: #ffffff;
    box-shadow: 0rem 0rem 0.06rem 0rem rgba(0, 0, 0, 0.2);
    border-radius: 3px;
  }
  .floorToggleUl_List-active button {
    margin-top: 2.5px;
    font-family: "MicrosoftYaHei";
    font-size: 13px;
    color: #595959;
    text-align: center;
    line-height: 27px;
    width: 40px;
    height: 40px;
    background-color: #ffffff;
    box-shadow: 0rem 0rem 0.06rem 0rem rgba(0, 0, 0, 0.2);
    border: solid 3px #fa7d34;
    border-radius: 3px;
  }
  .floorToggleUl_List_Click button {
    margin-top: 2.5px;
    font-family: "MicrosoftYaHei";
    font-size: 13px;
    color: #ffffff;
    text-align: center;
    line-height: 27px;
    width: 40px;
    height: 40px;
    box-shadow: 0rem 0rem 3px 0rem rgba(0, 0, 0, 0.2);
    border: solid 3px #fa7d34;
    border-radius: 3px;
  }
  #floorToggleUl_List .floorToggleMinUl_i {
    width: 14px;
    height: 8px;
    display: inline-block;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    background-image: url("../assets/images/icon_jiantoushang.png");
    background-size: 70%;
    background-repeat: no-repeat;
    background-position: center;
  }
  #floorToggleUl_List .floorToggleMinUl_iR {
    width: 14px;
    height: 8px;
    display: inline-block;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    background-image: url("../assets/images/icon_jiantoushanglv.png");
    background-size: 70%;
    background-repeat: no-repeat;
    background-position: center;
  }
}

// 搜索主体页
.searchResultContent {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
  min-height: 100%;
  background-color: #fff;
  z-index: 110;
  .searchResultListLoading {
    position: absolute;
    top: 45px;
    padding-top: 3%;
    width: 100%;
    height: 85px;
    background-color: #f7f7f3;
    transition: all 0.6s cubic-bezier(0.55, 0, 0.1, 1);
    .searchResultListLoadingPic {
      width: 30px;
      height: 30px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      background: url("../assets/images/loading.gif") no-repeat center;
      background-size: 80%;
    }
  }
  .searchResultListLoadingFail {
    position: absolute;
    top: 45px;
    padding-top: 3%;
    width: 100%;
    height: 85px;
    background-color: #f7f7f3;
    color: #aaaaaa;
    font-size: 12px;
    line-height: 63px;
    text-align: center;
    transition: all 0.6s cubic-bezier(0.55, 0, 0.1, 1);
  }
  .slideList {
    position: absolute;
    top: 45px;
    padding-top: 3%;
    width: 100%;
    height: 85px;
    background-color: #f7f7f3;
    transition: all 0.6s cubic-bezier(0.55, 0, 0.1, 1);
  }
  .swiper-container2 {
    width: 100%;
    height: 100%;
    margin-top: 5px;
  }

  .swiper-wrapper2 {
    width: 100%;
    font-size: 8.5px;
    background-size: contain;
  }

  .swiper-slide2 {
    width: 100%;
    height: auto !important;
  }

  .swiper-slide2 ul {
    width: 100%;
    height: 100%;
  }

  .shortcut ul li {
    width: 20%;
    height: 60px;
    float: left;
    cursor: pointer;
    box-sizing: border-box;
    text-align: center;
  }

  .shortcut ul li span {
    width: 100%;
    display: block;
    text-align: center;
    color: #8d8d93;
  }

  .picture {
    width: 34px;
    height: 34px;
    background-size: contain;
    background-repeat: no-repeat;
    margin-bottom: 3.7px;
  }

  /* swiper分页器 */
  .swiper-pagination-bullet-active {
    background-color: #878787 !important;
  }

  .swiper-pagination-bullet {
    border: solid 0.01rem #878787 !important;
    width: 5px !important;
    height: 5px !important;
  }

  .swiper-container-horizontal > .swiper-pagination-bullets,
  .swiper-pagination-custom,
  .swiper-pagination-fraction {
    bottom: 0.25rem !important;
  }

  .swiper-container-horizontal
    > .swiper-pagination-bullets
    .swiper-pagination-bullet {
    margin: 0 4px !important;
  }

  .searchRecordTitle{
    position: relative;
    top: 175px;
    left: 50%;
    width: 95%;
    height: 35px;
    color: #8d8d93;
    font-size: 13.5px;
    transform: translateX(-50%);
  }

  .searchRecordContent{
    position: absolute;
    top: 200px;
    left: 50%;
    width: 95%;
    height: auto;
    color: #0d0d0d;
    font-size: 13.5px;
    transform: translateX(-50%);
    li{
      position: relative;
      width: 100%;
      height: 50px;
      margin-top: 10px;
      margin-bottom: 10px;
      .searchRecordPic{
        position: absolute;
        width: 25px;
        height: 25px;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        background: url('../assets/images/locationPic.png') no-repeat center;
        background-size: 80%;
      }
      .searchRecordInfo{
        position: absolute;
        width: 85%;
        height: 100%;
        left: 40px;
        border-bottom: 1px solid #e5e5e5;
        .searchRecordShopInfo{
          height: 19px;
          font-size: 12px;
          color: #666666;
        }
        .searchRecordFloorInfo{
          height: 19px;
          font-size: 14px;
          color: #aaaaaa;
        }
      }
    }
    .removeRecord{
      color: #8d8d93;
      margin-top: 18px;
      text-align: center;
      font-size: 12px;
    }
  }




}

// 设置起点终点模块
.setPoint {
    width: 95%;
    height: 118px;
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: #ffffff;
    border-radius: 3px 3px 0 0;
    opacity: .8;
    transition: all 0.5s;
    .toper {
      width: 100%;
      height: 80px;
      .left {
        float: left;
        width: 50%;
        p {
          height: 27px;
          line-height: 27px;
          word-wrap: break-word;
          word-break: break-all;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          margin: 10px 0px 5px 20px;
        }
        p:first-child {
          font-size: 14px;
          color: #666666;
        }
        p:last-child {
          font-size: 14px;
          color: #AAAAAA;
        }
      }
      .right {
        float: left;
        width: 50%;
        padding-top: 15px;
        .setStart {
          background: url('../assets/images/qidian.png') center center no-repeat;
          float: right;
          width: 45px;
          height: 45px;
          background-size: contain;
          margin-right: 10px
        }
        .setEnd {
          background: url('../assets/images/zhongdian.png') center center no-repeat;
          width: 45px;
          height: 45px;
          background-size: contain;
          float: right;
          margin-right: 10px
        }
      }
    }
    .share {
      position: relative;
      height: 38px;
      text-align: center;
      border-top: 1px solid #ececec;
      .share_icon {
        position: absolute;
        top: 50%;
        left: 35%;
        transform: translateY(-50%);
        width: 13px;
        height: 13px;
        background: url('../assets/images/icon_fenxianghui.png') no-repeat center;
        background-size: 100%;
      }
      .share_content {
        position: absolute;
        left: 45%;
        height: 38px;
        font-size: 10px;
        color: #393a3e;
        line-height: 38px;
      }
    }  

}

// 设置起点终点之后寻路模块
.guidedSearchPath{
    width: 95%;
    height: 125px;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    background-color: #ffffff;
    border-radius: 3px;
    opacity: .9;
    transition: all 0.2s;
    .searchPathTips {
      height: 80px;
      color: #aaaaaa;
      width: 100%;
      position: relative;
      top: 0;
      border-bottom: 1px solid #ececec;
      .searchPathTopTip{
        font-size: 16px;
        position: absolute;
        top: 0;
        width: 100%;
        height: 50px;
        line-height: 70px;
        padding-left: 22px;
      }
      .searchPathBottomTip{
       font-size: 13px;
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 30px;
        line-height: 30px;
        padding-left: 22px;
      }
    }
    .daohang {
      width: 100%;
      height: 45px;
      position: relative;
      bottom: 0;
      .mogo {
        width: 200px;
        height: 35px;
        font-size: 15px;
        background-color: #FA7D34;
        color: #ffffff;
        text-align: center;
        position: absolute;
        line-height: 35px;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        border-radius: 17px;
      }
    }
}

// 起始点终点激活模块
.operation_active {
    width: 100%;
    height: 85px;
    background-color: #f7f7f3;
    position: fixed;
    top: 0;
    z-index: 101;
    box-shadow: 0px 0 0.04rem 0px rgba(0, 0, 0, .16);
    border-radius: 3px;
    transition: all 0.5s;
    .operationContent{
      width: 93%;
      height: 85%;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      background-color: #fff;
      border-radius: 3px;
    }
    .inputLeft{
      position: absolute;
      width: 25px;
      height: 75%;
      top: 50%;
      left: 25px;
      transform: translateY(-50%);
      span{
        position: absolute;
        width: 100%;
        height: 100%;
        background: url('../assets/images/henduodian.png') no-repeat center;
        background-size: 16%;
      }
    }
    .inputRight{
      position: absolute;
      width: 70%;
      height: 100%;
      top: 50%;
      left: 50px;
      transform: translateY(-50%);
    }
    .selectPoint {
      position: relative;
      width: 100%;
      height: 50%;
      #startPoint{
        position: absolute;
        color: #8d8d93;
        border-bottom: 1px solid #e5e5e5!important;
        font-size: 12px;
      }
      #endPoint{
        position: absolute;
        color: #8d8d93;
        font-size: 12px;
      }
      input {
        width: 95%;
        height: 100%;
        border-radius: 1px;
        font-size: .22rem;
        float: left;
        margin-bottom: .15rem;
        -webkit-appearance: none;
        font-family: "Microsoft YaHei", "iconfont", "FontAwesome" !important;
      }
    }
    .reverse {
      width: 15px;
      height: 15px;
      background: url('../assets/images/tihuan.png') center center no-repeat;
      position: absolute;
      top: 50%;
      right: 15px;
      margin-top: -6.5px;
      background-size: 100%;
    }
    .goback {
      width: 13px;
      height: 13px;
      position: absolute;
      background: url('../assets/images/fanhui.png') center center no-repeat;
      color: #858585;
      top: 10px;
      left: 10px;
      background-size: 80%;
    }
}

// 起始点终点未激活模块
.operation{
    width: 100%;
    height: 0px;
    background-color: #f7f7f3;
    position: fixed;
    top: 0;
    z-index: 101;
    box-shadow: 0px 0 0.04rem 0px rgba(0, 0, 0, .16);
    border-radius: 3px;
    transition: all 0.5s;
    .operationContent{
      width: 93%;
      height: 85%;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      background-color: #fff;
      border-radius: 3px;
    }
    .inputLeft{
      position: absolute;
      width: 25px;
      height: 75%;
      top: 50%;
      left: 25px;
      transform: translateY(-50%);
      span{
        position: absolute;
        width: 100%;
        height: 100%;
        background: url('../assets/images/henduodian.png') no-repeat center;
        background-size: 16%;
      }
    }
    .inputRight{
      position: absolute;
      width: 70%;
      height: 100%;
      top: 50%;
      left: 50px;
      transform: translateY(-50%);
    }
    .selectPoint {
      position: relative;
      width: 100%;
      height: 50%;
      #startPoint{
        position: absolute;
        color: #8d8d93;
        border-bottom: 1px solid #e5e5e5!important;
        font-size: 12px;
      }
      #endPoint{
        position: absolute;
        color: #8d8d93;
        font-size: 12px;
      }
      input {
        width: 95%;
        height: 100%;
        border-radius: 1px;
        font-size: .22rem;
        float: left;
        margin-bottom: .15rem;
        -webkit-appearance: none;
        font-family: "Microsoft YaHei", "iconfont", "FontAwesome" !important;
      }
    }
}

// 模拟导航顶部部分
.inNavigationTopBarBox {
	width: 360px;
  left: 50%;
  transform: translateX(-50%);
	box-sizing: border-box;
	position: fixed;
  top: 10px;
  height: 90px;
  transition: all 0.5s;
  box-shadow: 2px 2px 20px #999999;
  border-radius: 3px;
  .inNavigationTopBar {
  	width: 100%;
  	height: 100%;
    box-sizing: border-box;
    .turnInfo {
    	width: 100%;
    	height: 70px;
    	background-color: #FFFFFF;
    	box-sizing: border-box;
    	padding: 13.5px 15px 12px 15px;
    	display: flex;
    	flex-flow: row;
      border-radius: 3px 3px 0rem 0rem;
      .turnInfoImg {
        display: inline-block;
      	width: 44px;
      	height: 44px;
      }
      .turnInfoText {
      	flex: 1;
      	font-size: 20px;
      	color: #fa7d34;
      	align-items: center;
      	display: -webkit-flex;
      	justify-content: center;
      	display: -webkit-flex;
      }
    }
    .destinationInfo {
    	width: 100%;
    	height: 20px;
    	background-color: #f5dcc0;
    	font-size: 11px;
    	line-height: 20px;
    	text-align: center;
    	color: #fa7d34;
    	border-radius: 0rem 0rem 3px 3px;
    }
  }
}


// 模拟导航底部部分
.inNavigationBotBarBox {
	width: 360px;
	box-sizing: border-box;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
	bottom: 0;
  overflow: hidden;
  transition: all 0.5s;
  border-radius: 3px;
  .inNavigationBotBar {
  	width: 100%;
  	height: 45px;
  	background-color: #ffffff;
  	box-sizing: border-box;
  	box-shadow: 0rem 0rem 3px 0rem rgba(136, 136, 136, 0.2);
  	border-radius: 3px;
  	display: flex;
  	flex-flow: row;
  	position: relative;
  	left: 0;
  	transition: left .5s;
  	-moz-transition: left .5s;
  	/* Firefox 4 */
  	-webkit-transition: left, .5s;
  	/* Safari 和 Chrome */
  	-o-transition: left .5s;
    /* Opera */
    div:nth-of-type(1) {
    	width: 51px;
    	height: 100%;
    	align-items: center;
    	display: -webkit-flex;
    	box-sizing: border-box;
      padding: 15px 0 15px 20px;
      span {
      	width: 15px;
      	height: 15px;
      	display: inline-block;
      	background-image: url("../assets/images/icon_guanbi.png");
      	background-size: 15px;
      }
    }
    div:nth-of-type(2) {
    	flex: 1;
    	font-size: 16px;
    	color: #676767;
    	padding: 12.5px 0;
    	align-items: center;
    	display: -webkit-flex;
    	justify-content: center;
      display: -webkit-flex;
      div {
      	width: 100%;
      	border-right: 1px solid #dddddd;
      	border-left: 1px solid #dddddd;
      	align-items: center;
      	display: -webkit-flex;
      	justify-content: center;
      	display: -webkit-flex;
      }
    }
    div:nth-of-type(3) {
    	width: 56px;
    	height: 100%;
    	padding: 12px 20px 12px 0;
      box-sizing: border-box;
      position: relative;
      img {
      	width: 21px;
        height: 21px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
      }
    }
  }
  .exitConfirmation {
  	width: 100%;
  	height: 45px;
  	background-color: #ffffff;
  	box-sizing: border-box;
  	box-shadow: 0rem 0rem 3px 0rem rgba(136, 136, 136, 0.2);
  	border-radius: 3px;
  	padding: 13px 15px;
  	display: flex;
  	flex-flow: row;
  	position: relative;
    right: 365px;
    bottom: 45px;
  	transition: right .5s;
  	-moz-transition: right .5s;
  	/* Firefox 4 */
  	-webkit-transition: right .5s;
  	/* Safari 和 Chrome */
  	-o-transition: right .5s;
    /* Opera */
    div {
    	width: 100%;
    	height: 100%;
    	box-sizing: border-box;
    	font-size: 17px;
    	align-items: center;
    	display: -webkit-flex;
    	justify-content: center;
    	display: -webkit-flex;
    }
    div:nth-of-type(1) {
    	border-right: 1px solid #dddddd;
    	color: #fa7d34;
    }
  }
}


/* 导航结束页 */
.endOfNavigationBox {
	width: 100%;
	height: 100%;
	background-color: rgba(57, 58, 62, 0.5);
	position: fixed;
	top: 0;
	z-index: 1000;
  box-sizing: border-box;
  .endOfNavigation {
  	width: 354px;
  	height: auto;
  	box-sizing: border-box;
  	position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    .startEndPointInfo {
      width: 100%;
      height: 208px;
      position: absolute;
      bottom: -208px;
    	background-color: #ffffff;
    	box-shadow: 0rem 0rem 3px 0rem rgba(136, 136, 136, 0.2);
    	border-radius: 3px 3px 0rem 0rem;
    	border: solid 1px #e5e5e5;
      box-sizing: border-box;
      transition: all 0.5s;
      .startEndPointBar {
      	width: 100%;
      	height: 40px;
      	background-color: #f5f5f5;
      	font-size: 14px;
      	color: #595959;
      	line-height: 40px;
      	text-align: center;
      }
      .startEndPointInput {
      	width: 100%;
      	height: 90.5px;
      	border-radius: 3px;
      	display: flex;
      	flex-flow: no-wrap;
      	box-sizing: border-box;
        padding: 0 15px;
        .startEndPointInputLeft {
        	width: 31px;
        	height: 100%;
        	align-items: center;
        	display: -webkit-flex;
        	justify-content: center;
          display: -webkit-flex;
          span {
          	width: 6px;
          	height: 51.5px;
          	display: inline-block;
          	background-image: url("../assets/images/henduodian.png");
          	background-size: 6px 51.5px;
          	background-repeat: no-repeat;
          }
        }
        .startEndPointInputCenter {
        	flex: 1;
        	height: 100%;
        	display: flex;
          flex-flow: column;
          div {
          	width: 100%;
            height: 45px;
            input {
            	width: 100%;
            	height: 15px;
            	padding: 15px 0;
            	font-size: 15px;
            	color: #595959;
            }
          }
          div:nth-child(1) {
          	border-bottom: 1px solid #dddddd;
          }
        }
      }
      .startEndPointBtn {
      	width: 100%;
      	height: 79.5px;
      	padding: 15px;
      	box-sizing: border-box;
      	display: flex;
      	flex-flow: row;
      	align-items: center;
        display: -webkit-flex;
        transition: all 0.5s;
        button {
        	font-size: 16px;
        	height: 34px;
        	border-radius: 17px;
        	text-align: center;
        	line-height: 34px !important;
        }
        button:nth-of-type(1) {
        	width: 130px;
        	background-color: #ffffff;
        	border: solid 1px #fa7d34;
        	color: #fa7d34;
        }
        button:nth-of-type(2) {
        	width: 180px;
        	background-color: #fa7d34;
        	color: #fff;
        }
        div {
        	flex: 1;
        }
      }
    }
    .startEndPointRank {
    	width: 100%;
      height: auto;
      position: absolute;
      bottom: -335px;
    	background-color: #ffffff;
    	box-shadow: 0rem 0rem 3px 0rem rgba(136, 136, 136, 0.2);
    	border-radius: 3px 3px 0rem 0rem;
    	border: solid 1px #e5e5e5;
      box-sizing: border-box;
      transition: all 0.5s;
      .startEndPointRankText {
      	width: 100%;
      	height: 40px;
      	background-color: #f5f5f5;
      	font-size: 14px;
      	color: #595959;
      	line-height: 40px;
      	text-align: center;
      }
      .startEndPointRankPick {
      	width: 100%;
      	height: 96px;
      	box-sizing: border-box;
        padding: 0 15px;
        .startEndPointRankPickStart {
        	width: 100%;
        	height: 44px;
        	box-sizing: border-box;
        	padding-top: 20px;
        	justify-content: center;
          display: -webkit-flex;
          .starability_basic {
          	width: 215px;
          	box-sizing: border-box;
          	display: flex;
          	flex-flow: row;
            justify-content: space-around;
            img {
            	width: 25px;
            	height: 25px;
            	display: inline-block;
            }
          }
        }
        .startEndPointRankPickRemark {
        	width: 100%;
        	height: 52px;
        	box-sizing: border-box;
        	padding: 20px 0;
        	font-size: 12px;
        	color: #808080;
        	text-align: center;
        	border-bottom: 1px solid #ececec;
        }
      }
      .startEndPointRankLabel {
        	width: 100%;
          // height: 123.5px;
          height: 0px;
        	padding: 0 15px;
        	box-sizing: border-box;
        	overflow: hidden;
        	transition: height .5s;
        	-moz-transition: height .5s;
        	/* Firefox 4 */
        	-webkit-transition: height .5s;
        	/* Safari 和 Chrome */
        	-o-transition: height .5s;
          /* Opera */
          .startEndPointRankLabelWords {
          	width: 100%;
          	height: 63.5px;
          	padding: 15px 0;
          	box-sizing: border-box;
          	display: flex;
          	flex-flow: row;
          	align-items: center;
          	display: -webkit-flex;
            justify-content: space-around;
            span {
            	font-size: 13px;
            	color: #595959;
            	display: inline-block;
            	width: 75px;
            	height:33.5px;
            	background-color: #ffffff;
            	border-radius: 3px;
            	border: solid 0.5px #e5e5e5;
            	text-align: center;
            	line-height: 33.5px;
            }
            span:active {
            	background-color: #e5e5e5 !important;
            }
          }
          .startEndPointRankLabelTextarea {
          	width: 100%;
            height: 60px;
            textarea {
            	width: 100%;
            	height: 100%;
            	background-color: #f5f5f5;
            	border-radius: 3px;
            	border: solid 0.5px #ececec;
            	font-size: 13px;
            	resize: none;
            	box-sizing: border-box;
            	padding: 10px;
            }
          }
        }
      .startEndPointRankBtn {
      	width: 100%;
      	height: 74px;
      	padding: 20px 15px;
      	box-sizing: border-box;
      	display: flex;
        flex-flow: row;
        button {
        	font-size: 16px;
        	border-radius: 17px;
        	text-align: center;
        	line-height: 34px;
        }
        button:nth-of-type(1) {
        	width: 130px;
        	height: 34px;
        	background-color: #ffffff;
        	border: solid 0.5px #fa7d34;
        	color: #fa7d34;
        }
        button:nth-of-type(2) {
        	width: 180px;
        	height: 34px;
        	background-color: #fa7d34;
        	color: #ffffff;
        }
        div {
        	flex: 1;
        }
      }
    }
  }
}
</style>